<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>就业创业统计</title>
	<link rel="stylesheet" type="text/css" href="../../Css/home.css">

	<!-- 统计图 开始 -->
	<script type="text/javascript" src="../../Js/echarts.js"></script>
	<!-- 	// <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
	 //    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
	 //    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
	 //    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
	 //    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
	 //    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
	 //    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
	 //    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
	 //    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script> -->
	<!-- 统计图 结束 -->

	<style type="text/css">

	

	</style>
</head>
<body>
	<div class="header">
		<div class="header-logo">
			<div class="logo-logo"><img src="../../Images/school.png"></div>
			<div class="logo-name">毕 业 生 就 业 创 业 跟 踪 系 统</div>
			<div class="login">
				<span>毕业生<a href="../Login/login.html"> 登 录,</a>填写就业信息</span>
			</div>
		</div>	
			<div class="header-nav">
				<div class="nav">
					<ul>
						<li><a href="../Index/index.html" class="current">首页</a></li>
						<li><a href="../Salary/index.html">工资分析</a></li>
						<li><a href="../Company/index.html">公司分析</a></li>
						<li><a href="../Employment/index.html">就业创业分析</a></li>
						<li><a href="../Related/index.html">专业的相关度</a></li>
					</ul>
				</div>
			</div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>

	<div class="select_type">
		
		<!-- 页面的内容  开始 -->
		<div class="display" style="border: 1px solid #dddddd;">
			<!-- 下拉选择框 -->
			<div class="content_title_bar">
				<span>&diams;请选择查看</span>

				<div class="select_div" style="float:left;margin-left:10px;">
				    <select name="">
				        <option value="芝士">2010届</option>
				        <option value="奶油">2011届</option>
				    </select>
				</div>
				<div class="select_div" style="float:left;margin-left:10px;">
				    <select name="">
				        <option value="芝士">电子信息工程</option>
				        <option value="奶油">计算机技术</option>
				    </select>
				</div>
				<span>毕业生的就业情况</span>
			</div>

			<div class="content_title_bar">
				<span>&diams;XXX届XXX专业 --- 毕业生工作与专业相关度统计图</span>
			</div>
			

			<!-- 毕业后第一年  公司情况 -->
			<div class="content_title_bar">
				<span>&diams;毕业后第一年</span>
			</div>
			<table class="content_table">
			<caption>整个学院毕业生工作与专业相关度人数表</caption>
				<tr>  
					<th>专业的相关度</th>
					<th>不相关</th>
					<th>有点相关</th>
					<th>挺多相关</th>
					<th>完全相关</th>
				</tr>

				<tr>
					<th>人数</th>
					<td>3</td>
					<td>10</td>
					<td>14</td>
					<td>10</td>
				</tr>
			</table>
 			<div id="container1" style="height: 100%;width:400px;height:300px; border: 1px solid #dddddd;float:left"></div>
	       
	        <script type="text/javascript">
				var dom = document.getElementById("container1");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title: {
						text: '整个学院毕业生工作与专业相关度人数统计图'
					},
				    xAxis: {
				        type: 'category',
				        data: ['不相关', '有点相关','挺多相关','完全相关']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
				        data: [3, 10, 14, 10],
				        type: 'bar'
				    }]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
	        </script>
			<!-- 环形图 -->
			<div id="container2" style="height: 300px;width:400px;float:left"></div>

			<script type="text/javascript">
				var dom = document.getElementById("container2");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				app.title = '环形图';

				option = {
					title: {
						text: '整个学院毕业生工作与专业相关度人数比例图'
					},
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'left',
				        data: ['不相关', '有点相关','挺多相关','完全相关']
				    },
				    series: [
				        {
				            name:'访问来源',
				            type:'pie',
				            radius: ['50%', '70%'],
				            avoidLabelOverlap: false,
				            label: {
				                normal: {
				                    show: false,
				                    position: 'center'
				                },
				                emphasis: {
				                    show: true,
				                    textStyle: {
				                        fontSize: '30',
				                        fontWeight: 'bold'
				                    }
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
				            data:[
				                {value:3, name:'不相关'},
				         
				                {value:10, name:'有点相关'},
				                {value:14, name:'挺多相关'},
				         
				                {value:10, name:'完全相关'}
				            ]
				        }
				    ]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
      		 </script>
			<div class="clear"></div>

			      		 <!-- 按专业 毕业生就业公司人数情况表 -->
      		 <table class="content_table">
      		 <caption>XXX届各个专业毕业生工作与专业相关度人数情况统计表</caption>
				<tr>  
					<th> </th>
					<th> 不相关</th>
					<th> 有点相关</th>
					<th> 挺多相关</th>
					<th> 完全相关</th>
				</tr>

				<tr>
					<th>电子信息工程</th>
					<td>10</td>
					<td>5</td>
					<td>6</td>		
					<td>7</td>
				</tr>
				<tr>
					<th>电子科学与技术</th>
					<td>10</td>
					<td>5</td>
					<td>6</td>		
					<td>7</td>
				</tr>
				<tr>
					<th>网络工程</th>
					<td>10</td>
					<td>5</td>
					<td>6</td>		
					<td>7</td>
				</tr>
				<tr>
					<th>自动化</th>
					<td>10</td>
					<td>5</td>
					<td>6</td>		
					<td>7</td>	
				</tr>
			</table>
			 <!-- 按专业 毕业生就业公司人数情况统计图 -->
			<div id="container12" style="height: 300px;"></div>
			<script type="text/javascript">
				var dom = document.getElementById("container12");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				app.title = '堆叠柱状图';

				option = {
					title: {
						text: 'XXX届各个专业毕业生工作与专业相关度人数情况统计图'
					},
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    legend: {
				        data:['电子信息工程','电子科学与技术','网络工程','自动化']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data: ['不相关', '有点相关', '挺多相关', '完全相关']
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'电子信息工程',
				            type:'bar',
				            data: [10, 5, 6, 7]
				        },
				        {
				            name:'电子科学与技术',
				            type:'bar',
				            // stack: '广告',
				            data:[12, 12, 1, 3]
				        },
				        {
				            name:'网络工程',
				            type:'bar',
				            // stack: '广告',
				            data:[9, 12, 11, 12]
				        },
				        {
				            name:'自动化',
				            type:'bar',
				            // stack: '广告',
				            data:[15, 2, 1, 5]
				        }
				    ]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
       		</script>



			<!-- ****************************************************************第二年******************************************************************* -->

			<!-- 毕业后第二年  公司情况 -->
			<div class="content_title_bar">
				<span>&diams;毕业后第二年</span>
			</div>
			<table class="content_table">
			<caption>整个学院毕业生工作与专业相关度人数表</caption>
				<tr>  
					<th>专业的相关度</th>
					<th>不相关</th>
					<th>有点相关</th>
					<th>挺多相关</th>
					<th>完全相关</th>
				</tr>

				<tr>
					<th>人数</th>
					<td>3</td>
					<td>10</td>
					<td>14</td>
					<td>10</td>
				</tr>
			</table>
 			<div id="container3" style="height: 100%;width:400px;height:300px; border: 1px solid #dddddd;float:left"></div>
	       
	        <script type="text/javascript">
				var dom = document.getElementById("container3");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title: {
						text: '整个学院毕业生工作与专业相关度人数统计图'
					},
				    xAxis: {
				        type: 'category',
				        data: ['不相关', '有点相关','挺多相关','完全相关']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
				        data: [3, 10, 14, 10],
				        type: 'bar'
				    }]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
	        </script>
			<!-- 环形图 -->
			<div id="container4" style="height: 300px;width:400px;float:left"></div>

			<script type="text/javascript">
				var dom = document.getElementById("container4");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				app.title = '环形图';

				option = {
					title: {
						text: '整个学院毕业生工作与专业相关度人数比例图'
					},
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        x: 'left',
				        data: ['不相关', '有点相关','挺多相关','完全相关']
				    },
				    series: [
				        {
				            name:'访问来源',
				            type:'pie',
				            radius: ['50%', '70%'],
				            avoidLabelOverlap: false,
				            label: {
				                normal: {
				                    show: false,
				                    position: 'center'
				                },
				                emphasis: {
				                    show: true,
				                    textStyle: {
				                        fontSize: '30',
				                        fontWeight: 'bold'
				                    }
				                }
				            },
				            labelLine: {
				                normal: {
				                    show: false
				                }
				            },
				            data:[
				                {value:3, name:'不相关'},
				         
				                {value:10, name:'有点相关'},
				                {value:14, name:'挺多相关'},
				         
				                {value:10, name:'完全相关'}
				            ]
				        }
				    ]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
      		 </script>


			<div class="clear"></div>

			      		 <!-- 按专业 毕业生就业公司人数情况表 -->
      		 <table class="content_table">
      		 <caption>XXX届各个专业毕业生工作与专业相关度人数情况统计表</caption>
				<tr>  
					<th> </th>
					<th> 不相关</th>
					<th> 有点相关</th>
					<th> 挺多相关</th>
					<th> 完全相关</th>
				</tr>

				<tr>
					<th>电子信息工程</th>
					<td>10</td>
					<td>5</td>
					<td>6</td>		
					<td>7</td>
				</tr>
				<tr>
					<th>电子科学与技术</th>
					<td>10</td>
					<td>5</td>
					<td>6</td>		
					<td>7</td>
				</tr>
				<tr>
					<th>网络工程</th>
					<td>10</td>
					<td>5</td>
					<td>6</td>		
					<td>7</td>
				</tr>
				<tr>
					<th>自动化</th>
					<td>10</td>
					<td>5</td>
					<td>6</td>		
					<td>7</td>	
				</tr>
			</table>
			 <!-- 按专业 毕业生就业公司人数情况统计图 -->
			<div id="container122" style="height: 300px;"></div>
			<script type="text/javascript">
				var dom = document.getElementById("container122");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				app.title = '堆叠柱状图';

				option = {
					title: {
						text: 'XXX届各个专业毕业生工作与专业相关度人数情况统计图'
					},
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    legend: {
				        data:['电子信息工程','电子科学与技术','网络工程','自动化']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data: ['不相关', '有点相关', '挺多相关', '完全相关']
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'电子信息工程',
				            type:'bar',
				            data: [10, 5, 6, 7]
				        },
				        {
				            name:'电子科学与技术',
				            type:'bar',
				            // stack: '广告',
				            data:[12, 12, 1, 3]
				        },
				        {
				            name:'网络工程',
				            type:'bar',
				            // stack: '广告',
				            data:[9, 12, 11, 12]
				        },
				        {
				            name:'自动化',
				            type:'bar',
				            // stack: '广告',
				            data:[15, 2, 1, 5]
				        }
				    ]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
       		</script>
<!-- ****************************************************************总结************************************************************************ -->
<!-- 最后总结这些年来的公司趋势图 -->
			<div class="content_title_bar">
				<span>&diams;毕业跟踪趋势走向图</span>
			</div>
			<div id="container5" style="height: 300px"></div>

			 <script type="text/javascript">
			var dom = document.getElementById("container5");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
			    title: {
			        text: '毕业跟踪趋势走向图'
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data: ['不相关', '有点相关','挺多相关','完全相关']
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    toolbox: {
			        feature: {
			            saveAsImage: {}
			        }
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['2010','2011','2012','2013','2014']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [
			        {
			            name:'不相关',
			            type:'line',
			            // stack: '总量',
			            data:[4, 5, 7, 8, 10]
			        },
			        {
			            name:'有点相关',
			            type:'line',
			            // stack: '总量',
			            data:[5, 6, 7, 8, 8]
			        },
			        {
			            name:'挺多相关',
			            type:'line',
			            // stack: '总量',
			            data:[5, 6,  8, 9, 8]
			        },
			        {
			            name:'完全相关',
			            type:'line',
			            // stack: '总量',
			            data:[15, 13, 12, 10,  8]
			        }
			    ]
			};
			;
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}
			</script>

















		</div>	
	</div>
	<!-- 页面的内容  结束 -->

	<!-- 页面的底部  开始 -->
	<div id="foot_main">

	<div id="foot_msg">
	<hr />
		◎2018广东石油化工学院主教东905智能家居创新实验室
		版权所有，并保留所有权利。<br>
		粤ICP备15032177号-1
	</div>
	<!-- 页面的底部  结束 -->
</div>


</body>
</html>
